import React from 'react'
import ReactDOM from 'react-dom'

import store from './store/index.js'

//容器组件
class App extends React.Component{
    constructor() {
        super()

        this.state = {
            name: store.getState().name
        }

        store.subscribe(() => {
            this.setState({
                name: store.getState().name
            })
        })
    }
    render() {
        return (
            // <div>
            //     <h1>App</h1>
            //     <p>{this.state.name}</p>
            //     <button onClick={
            //         () => {
            //             store.dispatch({
            //                 type: 'CHANGE_NAME',
            //                 name: '王五'
            //             })
            //         }
            //     }>点我修改name</button>
            // </div>
            <AppUI name={this.state.name}/>
        )
    }
}

//UI组件
const AppUI = (props) => {
   return (
       <div>
           <h1>App</h1>
           <p>{props.name}</p>
           <button onClick={
               () => {
                   store.dispatch({
                       type: 'CHANGE_NAME',
                       name: '王五'
                   })
               }
           }>点我修改name</button>
       </div>
   )
}

ReactDOM.render(<App/>, document.getElementById('root'))